<template>
  <div class="algoStyle">
    <div class="footer">
      <ElButton style="margin-right: 5px" @click="resetForm()">取消</ElButton>
      <ElButton type="primary" @click="submitForm()"> 确定 </ElButton>
    </div>
    <ElScrollbar style="height: calc(60vh - 63px)">
      <ElCheckboxGroup
        v-model="selectList"
        style="width: 100%;height: 100%;"
        class="scrollbar"
      >
        <div
          v-for="item in wayList"
          :key="item.value"
          class="mg-b-10 scrollbar-text"
        >
          <ElCheckbox
            v-if="item.value === 1 || item.value === 9 || item.value === 22"
            :label="item.label"
            :value="item.value"
          >
            <div class="scrollbar-img" @click.stop.prevent="changeClick(item)">
              <img :src="item.url" />
              <span>{{ item.label }}</span>
            </div>
          </ElCheckbox>

          <ElCheckbox :label="item.label" :value="item.value" v-else>
            <div class="scrollbar-img">
              <img :src="item.url" />
              <span>{{ item.label }}</span>
            </div>
          </ElCheckbox>
        </div>
      </ElCheckboxGroup>
      <!-- </div> -->
    </ElScrollbar>
    <algorithmDialog
      ref="algorithmVisible"
      @algoSetting="algoSetting"
    ></algorithmDialog>
  </div>
</template>
<script  setup>
import {
  ElDialog,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElMessage,
  ElScrollbar,
  ElCheckboxGroup,
  ElCheckbox,
} from "element-plus";
import { reactive, ref, watch, computed, onMounted } from "vue";
import { router } from "#/router";
import algorithmDialog from "./algorithmDialog.vue";
const props = defineProps({
  algorithmConfig: {
    algorithmExtends: Array,
    algorithmList: Array,
  },
});
const emit = defineEmits(["close", "algoView", "getalgoSetting"]);
const selectList = ref([]);
const algorithmExtends = ref([]);

const dialogVisible = ref(false);
const algorithmVisible = ref(false);
const ruleFormRef = ref();
const ruleForm = reactive({
  id: "",
  name: "",
  type: "",
});

const wayList = [
  {
    value: 1,
    label: "人员聚集监测",
    url: new URL(`/static/algorithm1.png`, import.meta.url).href,
  },
  {
    value: 2,
    label: "踩踏预警监测",
    url: new URL(`/static/algorithm3.png`, import.meta.url).href,
  },
  {
    value: 3,
    label: "突然加速物体监测",
    url: new URL(`/static/algorithm4.png`, import.meta.url).href,
  },
  {
    value: 4,
    label: "打架斗殴监测",
    url: new URL(`/static/algorithm2.png`, import.meta.url).href,
  },
  {
    value: 5,
    label: "攀爬翻越监测",
    url: new URL(`/static/algorithm17.png`, import.meta.url).href,
  },
  {
    value: 6,
    label: "人员摔倒监测",
    url: new URL(`/static/algorithm16.png`, import.meta.url).href,
  },
  {
    value: 7,
    label: "定点排徊监测",
    url: new URL(`/static/algorithm22.png`, import.meta.url).href,
  },
  {
    value: 8,
    label: "屋顶人员监测",
    url: new URL(`/static/algorithm21.png`, import.meta.url).href,
  },
  {
    value: 9,
    label: "身份识别",
    url: new URL(`/static/algorithm6.png`, import.meta.url).href,
  },
  {
    value: 10,
    label: "违章停车监测",
    url: new URL(`/static/algorithm5.png`, import.meta.url).href,
  },
  {
    value: 11,
    label: "逆行监测",
    url: new URL(`/static/algorithm23.png`, import.meta.url).href,
  },
  {
    value: 12,
    label: "超速监测",
    url: new URL(`/static/algorithm7.png`, import.meta.url).href,
  },
  {
    value: 13,
    label: "可疑车辆追踪",
    url: new URL(`/static/algorithm9.png`, import.meta.url).href,
  },
  {
    value: 14,
    label: "可疑停留车辆",
    url: new URL(`/static/algorithm24.png`, import.meta.url).href,
  },
  {
    value: 15,
    label: "特殊车辆监测",
    url: new URL(`/static/algorithm8.png`, import.meta.url).href,
  },
  {
    value: 16,
    label: "烟花爆竹",
    url: new URL(`/static/algorithm11.png`, import.meta.url).href,
  },
  {
    value: 17,
    label: "非法焚烧",
    url: new URL(`/static/algorithm25.png`, import.meta.url).href,
  },
  {
    value: 18,
    label: "建筑物倒塌",
    url: new URL(`/static/algorithm10.png`, import.meta.url).href,
  },
  {
    value: 19,
    label: "非法倾倒垃圾",
    url: new URL(`/static/algorithm18.png`, import.meta.url).href,
  },
  {
    value: 20,
    label: "违章建筑",
    url: new URL(`/static/algorithm12.png`, import.meta.url).href,
  },
  {
    value: 21,
    label: "非法盗采",
    url: new URL(`/static/algorithm13.png`, import.meta.url).href,
  },
  {
    value: 22,
    label: "人流监测",
    url: new URL(`/static/algorithm19.png`, import.meta.url).href,
  },
  {
    value: 23,
    label: "车流监测",
    url: new URL(`/static/algorithm14.png`, import.meta.url).href,
  },
  {
    value: 24,
    label: "道路拥堵监测",
    url: new URL(`/static/algorithm15.png`, import.meta.url).href,
  },
  {
    value: 25,
    label: "交通事故监测",
    url: new URL(`/static/algorithm20.png`, import.meta.url).href,
  },
];

const submitForm = () => {
  // 添加成功
  ElMessage({
    plain: true,
    message: "添加成功",
    type: "success",
  });
  dialogVisible.value = false;
  emit("algoView", selectList.value);
  emit("getalgoSetting", algorithmExtends.value);
};

const changeClick = (item) => {
  const index = algorithmExtends.value.findIndex(
    (obj) => obj.algorithmId === item.value
  );
  if (index !== -1) {
    algorithmVisible.value.editDialog(item, algorithmExtends.value);
  } else {
    algorithmVisible.value.addDialog(item);
  }
};
const resetForm = () => {
  emit("close");
  dialogVisible.value = false;
};

const algoSetting = (item) => {
  const obj = {};
  if (item.algorithmId == 1) {
    obj.algorithmId = item.algorithmId;
    obj.state = item.state;
    obj.maxPerson = item.maxPerson;
    obj.personDistance = item.personDistance;
  }
  if (item.algorithmId == 9) {
    obj.algorithmId = item.algorithmId;
    obj.state = item.state;
    obj.maxIdentifyAccuracy = item.maxIdentifyAccuracy;
    obj.faceImageUrl = item.faceImageUrl;
  }
  if (item.algorithmId == 22) {
    obj.algorithmId = item.algorithmId;
    obj.state = item.state;
    obj.maxFlow = item.maxFlow;
    obj.density = item.density;
  }
  // 更新algorithmExtends数据
  // 如果存在则更新，不存在则添加
  const index = algorithmExtends.value.findIndex(
    (item) => item.algorithmId === obj.algorithmId
  );
  if (index !== -1) {
    algorithmExtends.value[index] = obj;
  } else {
    algorithmExtends.value.push(obj);
  }
  // // 查找algorithmList，若启用则添加，不启用则删除
  // if (item.state == 1) {
  //   const index = selectList.value.findIndex((item) => item == obj.algorithmId);
  //   if (index === -1) {
  //     selectList.value.push(item.algorithmId);
  //   }
  // } else {
  //   const index = selectList.value.findIndex((item) => item == obj.algorithmId);
  //   if (index !== -1) {
  //     selectList.value.splice(index, 1);
  //   }
  // }
};

watch(
  () => props.algorithmConfig,
  (newVal) => {
    if (newVal.algorithmExtends && Array.isArray(newVal.algorithmExtends)) {
      algorithmExtends.value = [...newVal.algorithmExtends]; // 使用展开运算符创建新数组，避免引用问题
    } else {
      algorithmExtends.value = []; // 如果newVal不是数组，则设置为空数组
    }
    if (newVal.algorithmList && Array.isArray(newVal.algorithmList)) {
      selectList.value = [...newVal.algorithmList]; // 使用展开运算符创建新数组，避免引用问题
    } else {
      selectList.value = []; // 如果newVal不是数组，则设置为空数组
    }
  },
  { deep: true, immediate: true }
);
</script>
<style scope lang="scss">
.algoStyle {
  position: absolute;
  right: 18%;
  bottom: 10vh;
  z-index: 1;
  width: 600px;
  height: 60vh;
  color: #303133;
  background-color: #fff;
  border-radius: 4px;
}

.scrollbar {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 54vh;
  padding: 10px;
  font-size: 14px;

  .scrollbar-text {
    display: flex;
    align-items: center;
    width: calc(33.33% - 10px);
    margin-right: 10px;
    margin-bottom: 10px;

    .el-checkbox {
      width: 100%;

      .el-checkbox__label {
        width: 100%;
      }
    }

    .scrollbar-img {
      display: flex;
      align-items: center;
      width: 100%;
      padding: 3px 5px;
      margin-right: 10px;
      background: #f0f2f5;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
    }

    img {
      width: 24px;
      height: 24px;
      margin-right: 8px;
    }
  }
}

.footer {
  padding: 10px;
  margin-bottom: 10px;
  text-align: right;
  border-bottom: 1px solid #dcdfe6;

  .el-button {
    font-size: 12px;
    font-weight: 400;
    color: #606266;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }

  .el-button--primary {
    color: #fff;
    background: #1989fa;
    border-color: #dcdfe6;
  }
}
</style>
